<template>
	<view id="product" class="product">
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper
				:current="current"
				circular
				height="750rpx"
				:list="swiperList"
				:interval="5000"
				@change="changeSlide"
			/>
			<view class="indicator">
				<view class="indicator-shadow"></view>
				<text class="indicator-value">{{ current + 1 }}/{{ productDetail.productImageList.length }}</text>
			</view>
		</view>
		
		<!-- 产品详情 -->
		<view class="product-detail">
			<view class="price">
				<view class="promotionPrice">
					<view class="symbol">￥</view>
					<view class="int">{{ cutDecimal(productDetail.promotionPrice)[0] }}</view>
					<view class="decimal">{{ cutDecimal(productDetail.promotionPrice)[1] }}</view>
					<view class="min">起</view>
				</view>
				<view v-if="productDetail.originalPrice && productDetail.originalPrice !== productDetail.promotionPrice" class="originalPrice">￥{{ toFixed(productDetail.originalPrice) }}</view>
			</view>
			<view class="title">{{ productDetail.name }}</view>
			<view class="describe">{{ productDetail.subTitle }}</view>
			<view class="ranking-container">
				<ranking :name="productDetail.enterprises.enterprisesAbbr" :ranking="productDetail.serviceRanking"></ranking>
				<text class="served">
					<text>已服务{{ formatNum(productDetail.sale) }}</text>
				</text>
			</view>
			
			<!-- 保障 -->
			<view v-if="false" class="safeguard" @click="openSafeguard">
				<view class="title">保障</view>
				<view class="safeguard-list">
					<view class="safeguard-item">
						<u-icon class="safeguard-icon" name="checkmark-circle" size="27rpx" color="#242424"></u-icon>
						<text>一次付费</text>
					</view>
					<view class="safeguard-item">
						<u-icon class="safeguard-icon" name="checkmark-circle" size="27rpx" color="#242424"></u-icon>
						<text>赠送意外险</text>
					</view>
					<view class="safeguard-item">
						<u-icon class="safeguard-icon" name="checkmark-circle" size="27rpx" color="#242424"></u-icon>
						<text>随心退</text>
					</view>
				</view>
				<u-icon class="arrow-right-icon" name="arrow-right" color="#242424" bold></u-icon>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { formatNum, toFixed, cutDecimal } from '@/utils';
	import Ranking from './ranking.vue';
	
	const emits = defineEmits(['update:show']);
	const props = defineProps({
		productDetail: {
			type: Object,
			defualt: () => ({}),
		},
	});
	// 打开保障弹窗
	const openSafeguard = (): void => {
		emits('update:show', true);
	};
	
	// 当前轮播图
	const current = ref<number>(0);
	// 轮播图列表
	const swiperList = computed(() => {
		return props.productDetail.productImageList.map((image: any) => image.pic);
	});
	// 切换轮播图事件
	const changeSlide = ({ current: val }: any): void => {
		current.value = val;
	};
</script>

<style lang="scss" scoped>
	.product {
		.swiper {
			width: 750rpx !important;
			height: 750rpx !important;
			background-color: #fff;
			.indicator {
				width: 88rpx;
				height: 44rpx;
				position: absolute;
				right: 20rpx;
				top: calc(687rpx);
				.indicator-shadow {
					width: 88rpx;
					height: 44rpx;
					background: #000000;
					opacity: 0.3;
					border-radius: 30rpx;
				}
				.indicator-value {
					line-height: 44rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
				}
			}
		}
		.product-detail {
			padding: 50rpx 24rpx 30rpx;
			background-color: #fff;
			.price {
				width: 100%;
				display: flex;
				align-items: flex-end;
				margin-bottom: 30rpx;
				.promotionPrice {
					display: flex;
					align-items: flex-end;
					color: #EB4836;
					font-weight: bold;
					font-family: PingFangSC;
					.symbol {
						line-height: 32rpx;
						font-size: 32rpx;
					}
					.int {
						line-height: 40rpx;
						font-size: 44rpx;
					}
					.decimal {
						line-height: 28rpx;
						font-size: 28rpx;
					}
					.min {
						line-height: 24rpx;
						font-size: 24rpx;
						margin-left: 6rpx;
					}
				}
				.originalPrice {
					line-height: 24rpx;
					font-size: 24rpx;
					font-family: PingFangSC;
					font-weight: 400;
					text-decoration: line-through;
					color: #707070;
					margin-left: 20rpx;
				}
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 12rpx;
				.tags-item {
					height: 36rpx;
					background: #FFF1F0;
					border-radius: 6rpx;
					line-height: 36rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #EB4836;
					margin-right: 16rpx;
					margin-bottom: 12rpx;
					padding: 0 16rpx;
					&:nth-last-child(1) {
						margin: 0;
					}
				}
			}
			& > .title {
				font-size: 28rpx;
				font-weight: bold;
				color: #242424;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			.describe {
				line-height: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #707070;
				margin-bottom: 30rpx;
			}
			.ranking-container {
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.served {
					line-height: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #707070;
				}
			}
			.safeguard {
				height: 88rpx;
				background: #F4F5F8;
				border-radius: 16rpx;
				padding: 0 25rpx 0 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				.title {
					line-height: 88rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #242424;
					margin-right: 24rpx;
				}
				.safeguard-list {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					.safeguard-item {
						display: flex;
						align-items: center;
						margin-right: 24rpx;
						.safeguard-icon {
							margin-right: 4rpx;
						}
						text {
							line-height: 88rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #242424;
						}
					}
				}
			}
		}
	}
</style>